<!DOCTYPE html>
<html>
 <head>
 	<meta charset="UTF-8">
  <title>Show</title>
  <link rel="stylesheet" type="text/css" href="css/groupPresentation.css"/>
		<script src="js/jquery2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel=" icon" href="img/favicon.ico" type="image/x-icon" />
		<!--<link rel="shortcut icon" href="img/LmJrSAxEtCdvXYFrpGSi.svg" type="image/x-icon" />-->
		<style type="text/css">
			
		</style>
<style>
html,body{margin:0px;background-color: #14151B; }
html,body{margin:0px; }
*{
				margin: 0;
				border: 0;
			}
			.top{
				width: 100%;
				height:900px;
				margin-top:-100px;
			}

			.descript{
				width: 450px;
				height: 270px;
				position: absolute;
				z-index: 99;
				top: 160px;
				left: 100px;
				}
			.p10{
				width: 450px;
				height: 95px;	
			}
			.p20{
				width: 450px;
				height: 95px;
				color: #d7b17e;
				font-size:35px;
				font-weight: 900;
				font-family: Microsoft YaHei,PingFang SC,Helvetica Neue,Helvetica,STHeiTi,sans-serif;
				text-shadow: 9px 9px 9px #d7b17e;
			}
			.p30{
				color: #d7b17e;
				font-family: Microsoft YaHei,PingFang SC,Helvetica Neue,Helvetica,STHeiTi,sans-serif;
			}
#pics_3d{
	/*background-color: #14151B;*/
    position:absolute;
    height:300px;
    width:100%; 
    left: 180px;
    top:2500px;
    z-index:100000;
    margin: auto;
   
   
  
}
  #pics_3d img{
    position:absolute;
     left:0;top:-200px;
   
   
     box-shadow:  0 0 50px dimgrey;
    
   
}
.a1{  position:absolute;
    height:300px;
    width:100%; 
    
   
    z-index:100000;
    overflow: hidden;
    background: #14151B;

   
   
   }
   .p1{
   	margin: auto;
   	display: inline-block;
 
     width: 100%;
    vertical-align: middle;
 
   
        font-size: 28px;
    color: #9c8260;
    font-weight: 500;
        line-height: 48px;
    text-align: center;
    margin-bottom: 68px;
    position: relative;
    font-family: Microsoft YaHei,PingFang SC,Helvetica Neue,Helvetica,STHeiTi,sans-serif;
    margin-top: 50px;}
   
   
    .partner-module-top-img-pre{
    	display: inline-block;
    height: 48px;
    width: 30px;
    vertical-align: middle;
    background-size: 30px;
        margin-right: 8px;
    background: url(img/span1.png) no-repeat 50%;
    background-size: 30px;}
    
    .partner-module-top-img-nxt{    display: inline-block;
    height: 48px;
    width: 30px;
    vertical-align: middle;
    background-size: 30px 
    margin-left: 8px;
    background: url(img/span2.png) no-repeat 50%; background-size: 30px }
    .first_neon {

    border: 1px solid;
    border-radius: 15px;
     color: #9c8260;
    font-family:"微软雅黑";
    padding: 26px 10px;
    ransition: text-shadow 0.5s ease 0s;
    width: 250px;
    text-decoration: none;
    font-weight: 500;}
 

.zzsc-content{display: inline-block;
  width: 100%;
  height: 100px;
  margin-top:500px; font-size: 3 8px;right: 0;margin-left: 45%;
  }

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#background {
  position: absolute;
  top: 3300px;
  left: 0;
  width: 100%;
  height: 600px;
  background: #fefefe;  
  perspective: 900px;
  background-color: #15141B;
}

#app {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 150px;
  margin: -170px 0 0 -100px;  
  background: url(img/jpeg.jpeg) 0 0 / 200px 150px no-repeat;
  box-shadow: -7px 10px 10px #333;
  transform: rotateX(60deg) rotateY(3deg) rotateZ(-25deg);
  transform-origin:50% 50%;
  transition: all 1s;
}

#background:hover #app {
  transform: rotate3d(0,0,0,0deg);
  box-shadow: -100px 100px 20px #fff;
}


			*
			{
				margin: 0;
				padding: 0;
			}
			.M4_6
			{
				width: 1200px;height: 1000px;
				margin: 0 74.5px 120px 74.5px;
				color: rgba(0,0,0,0.65);
	            background: #14151b;
			}
			.MB120
			{
				width: 1200px;height: 405px;
				background: #14151b;
				margin-bottom: 120px;
				margin: auto;
				margin-top: 20px;
			}
			.MB120-top-title
			{
				width: 1200px;height: 70px;
			    font-size: 28px;
			    color: #9c8260;
			    text-align: center;
			    margin-bottom: 68px;
			}
			.MB120-top-title-p
			{
				width: 1200px;height: 51px;
			    font-weight: 400;
			    font-family: "微软雅黑";
			 
			}
			.MB120-top-title-p-span1
			{
				display: inline-block;
    height: 48px;
    width: 30px;
    vertical-align: middle;
    background-size: 30px;
        margin-right: 8px;
    background: url(img/span1.png) no-repeat 50%;
    background-size: 30px
			}
			.MB120-top-title-p-span2
			{
					display: inline-block;
    height: 48px;
    width: 30px;
    vertical-align: middle;
    background-size: 30px;
        margin-right: 8px;
    background: url(img/span2.png) no-repeat 50%;
    background-size: 30px;
    
			}
			.MB120-module
			{
				width: 1200px;height: 236px;margin: auto;
			}
			.MB120-module-item
			{
				display: inline-block;
				width: 274px;height: 250px;
				padding: 0 13px;
				float:left;
				text-align: center;
				vertical-align: middle;
			}
			.MB120-module-item-img
			{
				width: 160px;height: 120px;
			    vertical-align: middle;
			}
			.MB120-module-item-p1
			{
				width: 274px;height: 34px;
				padding: 30px 0 10px 0;
				color: #d7b17e;
    			font-size: 22px;
    			line-height: 34px;
    			font-weight: 400;
    			font-family: "微软雅黑";
			}
			.MB120-module-item-p2
			{
				color: #d7b17e;
			    font-size: 14px;
			    line-height: 21px;
			    opacity: 0.7;
			    width: 200px;
		        font-weight: 300;
		        margin:0 37px;
		        font-family: "微软雅黑";
		        margin-top: 40px;
			}
			
			
			
			.MB12O-team-setup
			{
				width: 1200px;height: 298px;
				background: #14151b;
				margin-bottom: 120px;
				
				margin: auto;
			}
			.MB12O-team-setup-title
			{
				width: 1200px;height: 51px;
			    font-size: 28px;
			    color: #9c8260;
			    text-align: center;
			    margin-bottom: 68px;
			}
			.MB12O-team-setup-title-p
			{
				width: 1200px;height: 51px;
			    font-weight: 400;
			    font-family: "微软雅黑";
			}
			.MB12O-team-setup-title-p-span1
			{
				display: inline-block;
    height: 48px;
    width: 30px;
    vertical-align: middle;
    background-size: 30px;
        margin-right: 8px;
    background: url(img/span1.png) no-repeat 50%;
    background-size: 30px
			}
			.MB12O-team-setup-title-p-span2
			{
				display: inline-block;
    height: 48px;
    width: 30px;
    vertical-align: middle;
    background-size: 30px;
        margin-right: 8px;
    background: url(img/span2.png) no-repeat 50%;
    background-size: 30px
			}
			.MB12O-team-setup-process
			{
				width: 1200px;height: 183px;
				text-align: center;
				margin-top:1100px;
				margin: auto;
			}
			.MB12O-team-setup-item
			{
				width: 274px;height: 121px;
				padding: 0 13px;
				float: left;
			}
			*{
			margin: 0;
			border: 0;
		}
		.intro{
			/*width: 100%;
			height: 400px;
			background-color:rgb(20, 21, 27);*/
			
		}
		.di1{
			margin: auto;
   	display: inline-block;
 
     width: 100%;
     height: 60px;
    vertical-align: middle;
 
   
        font-size: 28px;
    color: #9c8260;
    font-weight: 500;
        line-height: 48px;
    text-align: center;
    margin-bottom: 68px;
    position: relative;
    font-family: Microsoft YaHei,PingFang SC,Helvetica Neue,Helvetica,STHeiTi,sans-serif;
    margin-top: 50px;
		}
		.di2{
	
     color: #9c8260;
    font-family:"微软雅黑";

 
    
    text-decoration: none;
    font-weight: 500;
			width: 100%;
			height: 240px;
		}
		.di21{
			width: 300px;
			height: 240px;
			display: inline-block;
			float: left;
			margin-left: 20px;
			
		}
		.di21 span{transition: width 2s,height 2s}
		.jpg{
			width: 300px;
			height: 200px;
			-webkit-filter:grayscale(1);
		}
		.jpg_hide1{
			width: 300px;
			height: 200px;
			display: none;
			position: absolute;
			left: 53px;
			top: 1578px;
			z-index: 99;
			color:yellow;
			background-color: grey;
			opacity: 0.8;
			
		}
		.jpg_hide2{
			width: 300px;
			height: 200px;
			display: none;
			position: absolute;
			left: 373px;
			top: 1578px;
			z-index: 99;
			color:yellow;
			background-color: grey;
		   opacity: 0.8;
		}
		.jpg_hide3{
			width: 300px;
			height: 200px;
			display: none;
			position: absolute;
			left: 693px;
			top: 1578px;
			z-index: 99;
			color:yellow;
			background-color: grey;
				opacity: 0.8;
			
		}
		.jpg_hide4{
			width: 300px;
			height: 200px;
			display: none;
			position: absolute;
			left: 1013px;
			top: 1578px;
			z-index: 99;
			color:yellow;
			background-color: grey;
				opacity: 0.8;
		}
		.name{
			width: 300px;
			height: 80px;
			line-height: 60px;
			text-align: center;
			color:rgb(156, 130, 96);
			font-size: 20px;
		}
		.di21:hover span{
			display: block;
		}
		
</style>

    <script src="js/prefixfree.min.js"></script>

 </head>
 <body  style="overflow-x:hidden;">
 	<div class="top">
		<video src="https://gw.alipayobjects.com/os/rmsportal/cUGGQUauwaUKFVtVxzxm.mp4" autoplay="" loop=""></video>
		</div>
		<div class="descript">
			<p class="p10">
				<img src="img/i1.svg"  style="width: 150px;height: 80px;"/>
			</p>
			<p class="p20"> 新版支付宝网页研发小组</p>
			<p class="p30">通过班级课堂自主组队，2018年前端研发第二小组正式成立，因其卓越创新能力和行业影响力，特独立研发新版支付宝网页。本组冠以支付宝金蚂蚁图像为组标，寓意像蚂蚁一样缩小自己，一起合作，更好放大组织才能，所向披靡。</p>
		</div>
 	
 		
		<div class="groupPicAndName">
			<div class="topTitle">
				<p>
					<span class="topLeftImg"></span>
					<span class="topMidText">小组成员</span>	
					<span class="toprightImg"></span>
				</p>
			</div>
			<div class="groupPresentation">
				<div class="stage-in">
					<div class="stage-in-item tang">
						<div class="stage-in-item-img">
							<img class="img1" id="Tang" style="border-radius: 5px;" alt="汤宸辕" src="img/group/Tang.jpg">
						</div>
						<p class="item-title">
							汤宸辕
						</p>
						<p class="ft-desc item-exp">
							电嵌Q1541<br />组长
						</p>
					</div>
					
					<div class="stage-in-item huang">
						<div class="stage-in-item-img">
							<img class="img2" alt="黄杰" src="img/group/Huang.png">
						</div>
						<p class="item-title">
							黄杰
						</p>
						<p class="ft-desc item-exp">
							电嵌Q1541<br />组员
						</p>
					</div>
					
					<div class="stage-in-item li">
						<div class="stage-in-item-img">
							<img class="img3" alt="李许怡安" src="img/group/Li.jpg">
						</div>
						<p class="item-title">
							李许怡安
						</p>
						<p class="ft-desc item-exp">
							电子Q1541<br />组员
						</p>
					</div>
					
					<div class="stage-in-item chen">
						<div class="stage-in-item-img">
							<div></div>
							<img class="img4" id="chen" alt="陈咪" src="img/group/Chen.jpg">
							<div></div>
						</div>
						<p class="item-title">
							陈咪
						</p>
						<p class="ft-desc item-exp">
							电子Q1541<br />组员
						</p>
					</div>
				</div>

				<div class="stage-in-effect-blade">
					<div class="stage-in-effect-blade-inner">
						
					</div>
				</div>
			</div>
		</div>





		<script type="text/javascript">
			$(function(){
				$(window).scroll(function (){
					if ($(window).scrollTop() > 380) {
						$(".groupPresentation").css("opacity","1");
						$(".stage-in-item").css("display","block");
						$(".tang").animate({marginTop: "0px"},500);
						$(".huang").animate({marginTop: "0px"},700);
						$(".li").animate({marginTop: "0px"},900);
						$(".chen").animate({marginTop: "0px"},1100);
						$(".stage-in-effect-blade").delay(1100).animate({width:"1600px"},800);
				   }
				});
			})
		</script>
		

 	
			<div class="di1">
				<span class="partner-module-top-img-pre" > </span>
				组员介绍
				<span class="partner-module-top-img-nxt " ></span>
			</div>
			<div class="di2">
				<div class="di21" style="margin-left: 53px;">
					<div class="jpg" >
						<img src="img/i4.jpg" style="width: 300px;height: 200px;" onmouseover="a()" onmouseout="a1()" />
					</div>
					<span class="jpg_hide1" id="h1">
				一个兴趣广泛热爱生活的大男孩，在组内担任组长。负责组员任务分配，代表组内与上级沟通，擅长调节人物关系，洞察组内人员情绪以及工作状态，是组织之间良好的枢纽，也是组内带头人。
					</span>
					<div class="name">
						汤宸辕
					</div>
				</div>
				<div class="di21">
					<div class="jpg">
						<img src="img/i5.jpg" style="width: 300px;height: 200px;" onmouseover="b()" onmouseout="b1()"/>
					</div>
					<span class="jpg_hide2" id="h2">
						一个善良天真浪漫的男生，擅长各种函数的调用以及脚本的编写，负责大部分网页的登录注册界面，善于与人沟通，是组内的开心果。
					</span>
					<div class="name">
						黄杰
					</div>
				</div>
				<div class="di21">
					<div class="jpg">
						<img src="img/i6.jpg" style="width: 300px;height: 200px;" onmouseover="c()" onmouseout="c1()"/>
					</div>
					<span class="jpg_hide3" id="h3">
					热爱生活别具一格的酷女孩，在网页样式编辑和页面规划有自己独特的见解，负责布局复杂网页，对块中块进行细微的处理，有女生的细腻也有男生的创造力，
					</span>
					<div class="name">
						李许怡安
					</div>
				</div>
				<div class="di21">
					<div class="jpg">
						<img src="img/i7.jpg" style="width: 300px;height: 200px;" onmouseover="d()" onmouseout="d1()"/>
					</div>
					<span class="jpg_hide4" id="h4">
					组内核心技术人员，专业技能十分厉害，专攻克各种超难度动画，为组内成员纠错答疑。负责各种炫酷特效，工作认真仔细，是组内人员学习的榜样。
					</span>
					<div class="name">
						陈咪
					</div>
				</div>
			</div>
		<div class="MB120">
				<div class="MB120-top-title">
					<p class="MB120-top-title-p">
						<span class="MB120-top-title-p-span1">
							<img src="img/光束左1.png">
						</span>
						<span class="MB120-top-title-p-span3">组内能力</span>
						<span class="MB120-top-title-p-span2">
							<img src="img/光束右.png">
						</span>
					</p>
				</div>
				<div class="MB120-module">
					<div class="MB120-module-item">
						<img class="MB120-module-item-img" src="img/灯塔.png">
						<p class="MB120-module-item-p1">远见力</p>
						<p class="MB120-module-item-p2">见微知著、洞察先机，敏锐捕捉网页独特魅力，抓住其特点施展小组才能</p>
					</div>
					<div class="MB120-module-item">
						<img class="MB120-module-item-img" src="img/人头.png">
						<p class="MB120-module-item-p1">影响力</p>
						<p class="MB120-module-item-p2">知行合一、勇立潮头，在整个H5班级的小组中，始终引领尖端技术和远见思想</p>
					</div>
					<div class="MB120-module-item">
						<img class="MB120-module-item-img" src="img/人脑.png">
						<p class="MB120-module-item-p1">创造力</p>
						<p class="MB120-module-item-p2">砥砺前行、从不止步，在网页布局、特效设计、实用性能，探索全新可能</p>
					</div>
					<div class="MB120-module-item">
						<img class="MB120-module-item-img" src="img/芽.png">
						<p class="MB120-module-item-p1">生命力</p>
						<p class="MB120-module-item-p2">仰望星空、脚踏实地，让小组保持亮眼成绩，奋勇前行势不可挡</p>
					</div>
				</div>
			</div>
 		
 		
 		<p class="p1"><span class="partner-module-top-img-pre"></span>
 				组员生活风采展示
 		<span class="partner-module-top-img-nxt"></span></p>
 		
 		
 	<div class="a1">
 	</div>
  <div id="pics_3d">
      <img src="img/lifephoto01.jpg" />  
      <img src="img/lifephoto02.jpg" />  
      <img src="img/lifephoto03.jpg" />  
      <img src="img/lifephoto04.jpg" />  
     
       <img src="img/lifephoto06.jpg" />  
      <img src="img/lifephoto07.jpg" />  
 </div>
 <!--<div class="zzsc-content">
	<a href="#" class="first_neon">Enjoy Our work</a>
	</div>-->
	<div style="text-align:center;clear:both;position:absolute;top:0;left:260px;z-index:999;">
	<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
	<script src="/follow.js" type="text/javascript"></script>
	</div>
	  <div id="background">
	  <a id="app" href="../chris/html/index.html"></a>
	</div>



 		<p class="p1" style="margin-top: 500px;">
 			<span class="partner-module-top-img-pre" ></span>
					小组团队组建过程
 			<span class="partner-module-top-img-nxt"></span>
 		</p>
<div class="MB12O-team-setup-process">
					<img src="img/流程.png">
					<div class="MB12O-team-setup-item">
						<p class="MB120-module-item-p1">人员选择</p>
						<p class="MB120-module-item-p2">古人说“近水楼台先得月”。凭借良好的位置优势和友善的人际关系，本组组员自行组队，成立了独一无二的前端项目小团体。</p>
					</div>
					<div class="MB12O-team-setup-item">
						<p class="MB120-module-item-p1">组长确定</p>
						<p class="MB120-module-item-p2">组员一致认为汤宸辕同学想法独特并且颇具领导才能，因此推荐他做组长。</p>
					</div>
					<div class="MB12O-team-setup-item">
						<p class="MB120-module-item-p1">第一次团队合作</p>
						<p class="MB120-module-item-p2">韩国三星官方网站，小组各个成员分工协作，各种施展自己的才能，运用自己所学网页制作知识，较好地完成了任务</p>
					</div>
					<div class="MB12O-team-setup-item">
						<p class="MB120-module-item-p1">答辩结课项目</p>
						<p class="MB120-module-item-p2">支付宝官方网站，从一级界面以此往下完成整体，贯彻落实螺旋化分工模式，效率级高地完成了整体界面。</p>
					</div>
				</div>
			</div>
</body>
 	
 	
 	
<script >
Item=function(UI){
    this.angle=0;
    this.UI=UI;
    this.update();
};
Item.ini={
 
    axle_w:400,
    axle_h:10,
    cen_x:500,
    cen_y:260
 
};
Item.prototype.update=function(){
    var J=this.UI.style,C=Item.ini,W=C.axle_w,H=C.axle_h,X=C.cen_x,Y=C.cen_y;
    var angle=this.angle/180*Math.PI;
    var left=Math.cos(angle)*W+X;
    var top=Math.sin(angle)*H+Y;
    var A=this.angle>270?this.angle-360:this.angle;
    var size=360-Math.abs(90-A)*3;
    this.UI.width=Math.max(size,120);
    var opacity=Math.max(10,size-180);
    J.filter='alpha(opacity='+opacity+')';
    J.opacity=opacity/100;
    J.left=(left-this.UI.offsetWidth/2)+'px';
    top=(top-this.UI.offsetHeight)+'px';
    J.top=top;
    J.zIndex=parseInt(size*100);
 
};
Nav_3D={
 
    items:[],
    dir:1,
    index:0,
    hover:false,
    add:function(item){
        this.items.push(item);
        item.index=this.items.length-1;
        item.UI.onclick=function (){
            var J=item.angle,M=Nav_3D;
            if(M.uping)return;
            if(J==90){
                return alert('goto new url..')
            };
            M.wheel_90(item);
            M.index=item.index;
        };
        item.UI.onmouseover=function (){
            if(item.angle==90){
                Nav_3D.hover=true;
                clearTimeout(Nav_3D.autoTimer);
            };
        };
        item.UI.onmouseout=function (){
            if(item.angle==90){
                Nav_3D.hover=false;
                Nav_3D.auto();
            };
        };
        return this;
    },
    wheel_90:function(hot){
        if(this.uping)return;
        this.uping=true;
        var This=this;
        this.timer=setInterval(function (){
            clearTimeout(This.autoTimer);
            var A=hot.angle;
            This.dir=A<270&&A>90?-1:1;
            if(A==90){
                clearInterval(This.timer);
                This.uping=false;
                This.onEnd(hot);
            }
            if(A>270)A-=360;
            var set=Math.ceil(Math.abs((90-A)*0.1));
            for (var i=0;i<This.items.length;i++ ) {
                var J=This.items[i];
                J.angle+= (set*This.dir);
                J.update();
                if(J.angle>360)J.angle-=360;
                if(J.angle<0)J.angle +=360;
            };
        },15);
    },
 
    ready:function(){
        var J=this.items,step=parseInt(360/J.length);
        for (var i=0;i<J.length;i++) {J[i].angle=i*step+90;}
        this.wheel_90(this.items[0]);
        Nav_3D.prevHot=this.items[0].UI;
        Nav_3D.setHot();
    },
 
    setHot:function(isHot){
        if(!this.prevHot)return;
        with(this.prevHot.style){
            borderColor=isHot!==false?'#CC0000':'#00CCFF';
            cursor=isHot!==false?'default':"pointer";
        };
        return this;
    },
     
    auto:function(){
        this.index--;
        if(this.index<0)this.index=this.items.length-1;
        var J=this.items[this.index];
        this.setHot(false).prevHot=J.UI;
        this.setHot();
        this.wheel_90(J);
    },
 
    onEnd:function(hot){
        if(this.hover){
            return setTimeout(function(){Nav_3D.onEnd();},100);
        }
        this.autoTimer=setTimeout(function(){Nav_3D.auto();},1500);
    }
 
};
var imgs=document.getElementById("pics_3d").getElementsByTagName("IMG");
for (var i=0;i<imgs.length;i++ ) {
    Nav_3D.add(new Item(imgs[i]))
}
Nav_3D.ready();
 
</script>
</html>